<%--
  Created by cofey on 16/11/18.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
</head>
<body>
<div id="urHere">无线南山统一管理平台</div>
<div id="index" class="mainBox" style="padding-top:18px;height:auto!important;height:550px;min-height:550px;">
    <div class="indexBox">
        <div class="boxTitle">总体信息</div>
        <p>无线南山平台已运行<b>${rumTime}</b>, 其中有移动热点<b>${tel}</b>个,电信热点<b>${mob}</b>个</p>
    </div>
    <div class="indexBox">
        <div class="boxTitle">热点地图</div>
        <div style="min-height: 650px; width: 100%; border: 1px solid gray;" id="map"></div>
    </div>
    <script type="text/javascript">
        var markerArr = ${markers};

        var map; //Map实例
        function mapInit() {
            map = new BMap.Map("map");
            //第1步：设置地图中心点，深圳市-南山区
            var point = new BMap.Point(113.93695, 22.539017);
            //第2步：初始化地图,设置中心点坐标和地图级别。
            map.centerAndZoom(point, 16);
            //第3步：启用滚轮放大缩小
            map.enableScrollWheelZoom(true);
            //第4步：向地图中添加缩放控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);
            //第5步：向地图中添加缩略图控件
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);

            //第6步：向地图中添加比例尺控件
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);

            //第7步：绘制点
            for (var i = 0; i < markerArr.length; i++) {
                var p0 = markerArr[i].point.split(",")[0];
                var p1 = markerArr[i].point.split(",")[1];
                var maker = addMarker(new window.BMap.Point(p0, p1), markerArr[i].status, markerArr[i].type);
                addInfoWindow(maker, markerArr[i], i);
            }
        }

        // 添加标注
        function addMarker(point, status, type) {
            var index = 11;
            if (status == '正常') {
                if (type == 1) {
                    index = 10;
                } else {
                    index = 12;
                }
            }
            var myIcon = new BMap.Icon("${assets}/img/markers.png",
                new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - index * 25)
                });
            var marker = new BMap.Marker(point, {icon: myIcon});
            map.addOverlay(marker);
            return marker;
        }

        // 添加信息窗口
        function addInfoWindow(marker, poi) {
            var type = poi.type == 1 ? "中国电信" : "中国移动";
            //pop弹窗标题
            var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px"><a href="${ctx}/ap/?hotspotId=' + poi.id + '">' + poi.title + '</a></div>';
            //pop弹窗信息
            var html = [];
            html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
            html.push('<td style="vertical-align:top;line-height:16px;width:30px;white-space:nowrap;word-break:keep-all">状态:</td>');
            html.push('<td style="vertical-align:top;line-height:16px">' + poi.status + ' </td>');
            html.push('</tr>');
            html.push('<tr>');
            html.push('<td style="line-height:16px;text-align: center" colspan="2">' + type + ' </td>');
            html.push('</tr>');
            html.push('<tr>');
            html.push('</tbody></table>');
            var infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 200});

            var openInfoWinFun = function () {
                marker.openInfoWindow(infoWindow);
            };
            marker.addEventListener("click", openInfoWinFun);
            return openInfoWinFun;
        }

        //异步调用百度js
        function mapLoad() {
            var load = document.createElement("script");
            load.src = "http://api.map.baidu.com/api?v=1.4&callback=mapInit";
            document.body.appendChild(load);
        }
        window.onload = mapLoad;
    </script>
</div>
</body>
</html>
